<script xmlns="http://www.w3.org/1999/html">

import {Search, DocumentAdd} from "@element-plus/icons-vue";
import request from "@/utils/request";
import FileUpload from "@/components/FileUpload.vue";

export default {

  name: "FileManageView",
  components: {FileUpload, Search, DocumentAdd},
  computed: {},
  data() {
    return {
      bucketList: [],
      fileName: "",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 10,
      bucketName: "",
      deleteDialog: false,
      uploadDialog: false,
      deleteFileName: "",
      deleteUuidName: "",
      deleteBucket: "",
      dataLoading: true
    }
  },
  watch: {
    bucketName(newVal, oldVal) {
      this.SearchFile();
    }
  }
  ,
  methods: {
    SearchFile() {
      this.dataLoading = true;
      request.get("/sysfile", {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          fileName: this.fileName,
          bucketName: this.bucketName
        }
      }).then(res => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.dataLoading = false;
      })
    },
    handleSizeChange(pageSize) { //改变当前每页的个数触发
      this.pageSize = pageSize
      this.SearchFile()
    },
    handleCurrentChange(pageNum) { //改变当前页码触发
      this.currentPage = pageNum
      this.SearchFile()
    },
    checkFile(url) {
      window.open(url);
    },
    deleteFileConfrim(row) {
      this.deleteFileName = row.fileName;
      this.deleteUuidName = row.fileUuidName;
      this.deleteBucket = row.bucketName;
      this.deleteDialog = true;
    },
    deleteFile() {
      request.delete("/files/delete/minio", {
        params: {
          bucketName: this.deleteBucket,
          file: this.deleteUuidName
        }
      }).then(res => {
        this.deleteDialog = false;
        this.SearchFile();
      })
    }, afterUpload() {
      this.SearchFile();
      this.uploadDialog = false;
    }
    ,
    bucketSelect(str) {
      this.bucketName = str;
      this.SearchFile();
    }
  },
  created() {
    request.get("/files/bucketList").then(res => {
      this.bucketList = res.data;
    })
    this.SearchFile();
  }
}
</script>

<template>
  <el-container>
    <el-main style="background-color: #cceeff;height: 100%;width: 100%">
      <el-container style="height: 100%">
        <el-header>
          <el-row>
            <el-col :span="6">
              <el-select v-model="bucketName" size="large">
                <template #prefix>存储桶&nbsp;</template>
                <el-option v-for="item in bucketList" :value="item">{{ item }}</el-option>
              </el-select>
            </el-col>
            <el-col :span="6" :push="1">
              <div>
                <el-input
                    size="large"
                    v-model="fileName"
                    style="max-width: 600px"
                >
                  <template #prepend>文件名</template>
                  <template #append>
                    <el-button @click="SearchFile">
                      <el-icon>
                        <Search/>
                      </el-icon>
                    </el-button>
                  </template>
                </el-input>
              </div>
            </el-col>
            <el-col :span="2" :push="10">
              <el-button type="primary" size="large" @click="uploadDialog = true">
                上传文件&nbsp;&nbsp;
                <el-icon>
                  <DocumentAdd/>
                </el-icon>
              </el-button>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="background-color: rgba(255,255,255,0.7);">
          <el-table border stripe :data="tableData" v-loading="this.dataLoading">
            <el-table-column type="index" prop="id" lable="ID" width="40px"/>
            <el-table-column prop="bucketName" label="存储桶" width="80px"/>
            <el-table-column prop="fileName" label="文件名" width="280px"/>
            <el-table-column prop="fileSize" label="文件大小" width="80px"/>
            <el-table-column prop="fileType" label="文件类型" width="120px"/>
            <el-table-column prop="filePath" label="文件路径"/>
            <el-table-column fixed="right" label="操作" width="140px">
              <template #default="scope">
                <el-button type="primary" size="small" @click="checkFile(scope.row.filePath)">查看</el-button>
                <el-button type="danger" size="small" @click="deleteFileConfrim(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer style="background-color: rgba(255,255,255,0.7);height: 45px">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[5, 10, 20, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </el-footer>
        <el-dialog
            v-model="deleteDialog"
            title="警告"
            width="300"
        >
          <span>确认删除文件{{ deleteFileName }}?</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="deleteDialog = false" size="large">取消</el-button>
              <el-button type="danger" @click="deleteFile()" size="large">
                确认
              </el-button>
            </div>
          </template>
        </el-dialog>
        <FileUpload :dialog-show="uploadDialog" @onClose="afterUpload()"></FileUpload>
      </el-container>
    </el-main>
  </el-container>
</template>

<style>

</style>